<template>
	<view class="home-container" :style="{ 'background-image': pageBackgroundImg }">
		<view class="activityArea" :style="{ 'padding-top': navbarHeight + 12 + 'px' }">
			<!-- 信息区域 -->
			<view class="info-box">
				<!-- 搜索输入框 -->
				<view class="searchBar-box" :style="{ height: navbarHeight + 'px', 'padding-top': navbarPT + 'px', 'background-image': pageBackgroundImg }">
					<view @click="toSearchPage" class="input-box">
						<image src="@/static/common/search-icon.png" class="searchIcon"></image>
						<input disabled type="text" class="searchInput" placeholder="搜索商品名称" placeholder-style="color: #BFBFBF;font-size: 14px" />
						<view class="searchBtn">搜索</view>
					</view>
					<view class="func-box">
						<view @click="fakeJinQun" v-if="!userStore.access_token" class="func-item" open-type="contact">
							<image src="/static/common/wechat-icon.png" class="func-icon"></image>
							<text class="func-text">进群</text>
						</view>
						<button v-else class="func-item" open-type="contact">
							<image src="/static/common/wechat-icon.png" class="func-icon"></image>
							<text class="func-text">进群</text>
						</button>
						<view @click="toTransLink" class="func-item">
							<image src="/static/common/link-icon.png" class="func-icon"></image>
							<text class="func-text">转链</text>
						</view>
						<view @click="toMessagePage" class="func-item message">
							<image src="/static/common/message-icon.png" class="func-icon"></image>
							<text class="func-text">消息</text>
							<text v-if="unReadMsgCount > 0" class="unReadIcon"></text>
						</view>
					</view>
				</view>

				<!-- swiper轮播区域 -->
				<view v-if="banner0.length" class="home-swiper-box">
					<u-swiper @click="banner0Click" :list="banner0" name="imgUrl" img-mode="scaleToFill"></u-swiper>
				</view>

				<!-- 活动swiper区域 -->
				<view v-if="activity3.length" class="activity-swiper-box" :style="{ 'background-image': ac3BackgroundImg }">
					<image
						@click="activity3TabClick(item)"
						v-for="(item, index) in activity3"
						:key="index"
						:src="item.imgUrl"
						mode="heightFix"
						class="activity-swiper-box-img"
					></image>
				</view>

				<!-- 平台菜单区域 -->
				<view v-if="platformMenuSwiperList.length" class="platform-menu-box" :style="{ height: platformMenuSwiperList.length <= 1 ? '160px' : '170px' }">
					<swiper @change="platformMenuChange" class="swiper" circular>
						<swiper-item v-for="(menuItem, index) in platformMenuSwiperList" :key="index">
							<view class="platform-menu-item">
								<view @click="menuItemClick(menu)" v-for="(menu, index) in menuItem" class="menu-item">
									<image :src="menu.imgUrl" class="menu-icon"></image>
									<text class="menu-text">{{ menu.title }}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>

					<view v-if="platformMenuSwiperList.length > 1" class="dots-list">
						<view v-for="(item, index) in platformMenuSwiperList.length" class="dots-item" :class="{ 'dots-active': activePlatformMenu == item }"></view>
					</view>
				</view>

				<!-- 分类菜单区域 -->
				<view v-if="activity0.length" class="category-menu-box">
					<image @click="activity0Click(item)" v-for="(item, index) in activity0" :key="index" :src="item.imgUrl" class="category-menu-item"></image>
				</view>
				
				<!-- swiper轮播区域 -->
				<view v-if="banner1.length" class="home-swiper-box">
					<u-swiper @click="banner1Click" :list="banner1" name="imgUrl" img-mode="scaleToFill"></u-swiper>
				</view>

				<!-- 活动补贴区域 -->
				<view v-if="banner2.length || activity1.length" class="subsidy-box">
					<view v-if="banner2.length" class="subsidy-left">
						<u-swiper @click="banner2Click" :list="banner2" name="imgUrl" img-mode="scaleToFill"></u-swiper>
					</view>
					<view v-if="activity1.length" class="subsidy-right">
						<image @click="activity1Click(item)" v-for="(item, index) in activity1" :src="item.imgUrl" mode="scaleToFill" class="subsidy-right-img"></image>
					</view>
				</view>

				<!-- 商品推荐区域 -->
				<view v-if="false" class="goods-suggest-box">
					<view class="goods-suggest-box-title">商品推荐</view>
					<scroll-view :scroll-x="true" class="goods-suggest-box-scroll-X">
						<view class="goods-suggest-list">
							<view v-for="(item, index) in 10" class="goods-suggest-list-box">
								<view class="goods-suggest-list-item">
									<image src="" class="goods-suggest-list-item-pic"></image>
									<view class="goods-suggest-list-item-title">覅欧派五十度灰覅u啊是覅篇</view>
									<view class="goods-suggest-list-item-money">¥19999.99</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 充值优惠区域 -->
				<view v-if="false" class="Recharge-Discount-box">
					<image v-for="(item, index) in 4" src="" class="Recharge-Discount-item"></image>
				</view>
			</view>

			<!-- 商品列表区域 -->
			<view class="goods-list-box">
				<!-- 平台切换tab列表 -->
				<view class="platform-tabs-list" :style="{ 'z-index': 100, position: 'sticky', top: navbarHeight + 'px' }">
					<view
						@click="choosePlatform(item, index)"
						v-for="(item, index) in navChild"
						:key="index"
						class="platform-tabs-list-item"
						:class="{ activePlatformTab: activePlatformTab == index }"
					>
						{{ item.title }}
					</view>
				</view>

				<!-- 平台商品列表 -->
				<view class="goods-list-view" :style="{ 'min-height': goodsListMinHeight }">
					<goodsListCom :goods-list="goodsList" />

					<!-- 列表加载 -->
					<u-loadmore v-if="goodsList.length" :status="LoadingStatus" />

					<!-- 商品列表为空状态 -->
					<view v-if="!goodsList.length" class="goods-list-view-empty" :style="{ 'min-height': goodsListMinHeight }">
						<image src="@/static/common/empty-icon.png" class="goods-list-view-empty-img"></image>
						<text>暂无数据</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 活动弹窗 -->
	<activityDialog v-model="activityDialogShow" v-model:popList="pop" />

	<!-- 读取剪切板弹窗 -->
	<ClipBoardDialog v-model="ClipboardDialogShow" :ClipBoardText="ClipBoardText" />
</template>

<script setup>
import { ref, computed, nextTick, onMounted } from 'vue';
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app';
import goodsListCom from '@/components/goodsList/index.vue';
import ClipBoardDialog from '@/components/ClipBoard-dialog/index.vue';
import activityDialog from '@/components/activity-dialog/index.vue';
import getNavBarHeight from '@/utils/getNavBarHeight';
import { getHomeConfig, getSearchGoods, getTransformLinkH5Url } from '@/api/home.js';
import { getUnreadCount } from '@/api/my.js'
import { useUserStore } from '@/store/userStore.js';

const userStore = useUserStore();

// 页面背景图
const pageBackgroundImg = ref('');

// 顶部轮播图banner0
const banner0 = ref([]);

// 中间轮播图banner1
const banner1 = ref([]);

// 超级爆品、新手教程模块
const activity3 = ref([]);

// 超级爆品、新手教程模块对应背景图
const ac3BackgroundImg = ref('');

// 平台菜单轮播图列表
const platformMenuSwiperList = ref([]);

// 页面中部左右结构三块区域背景图(左边轮播)
const banner2 = ref([]);

// 页面中部左右结构三块区域背景图(右边上下卡片)
const activity1 = ref([]);

// 页面商品平台分类菜单列表
const navChild = ref([]);

// activity0活动模块
const activity0 = ref([]);

// 页面弹窗列表
const pop = ref([]);

// 活动弹窗
const activityDialogShow = ref(false);

// 获取用户剪切板内容
const ClipboardDialogShow = ref(false);
const ClipBoardText = ref('');
const getClipboardData = () => {
	uni.getClipboardData({
		success: function (res) {
			console.log('用户剪切板内容：', res.data);
			if (res.data) {
				ClipBoardText.value = res.data;
				ClipboardDialogShow.value = true;
			}
		}
	});
};
getClipboardData();

let { statusBarHeight, navBarHeight, capsuleHeight } = getNavBarHeight();

// 计算导航栏的高度
const navbarHeight = computed(() => {
	goodsListMinHeight.value = `calc(100vh - ${statusBarHeight + navBarHeight + capsuleHeight + 48 + 'px'})`;
	return statusBarHeight + navBarHeight + capsuleHeight;
});

// 计算导航栏的顶部边距
const navbarPT = computed(() => {
	return statusBarHeight + capsuleHeight + 12;
});

// 平台tab切换列表
const activePlatformTab = ref(0);

// 平台菜单滑动事件
const activePlatformMenu = ref(1);
const platformMenuChange = (e) => {
	console.log(e);
	activePlatformMenu.value = e.detail.current + 1;
};

// 页面下拉刷新
onPullDownRefresh(() => {
	console.log('下拉刷新');
	pageNum.value = 1;
	total.value = 0;
	activePlatformTab.value = 0;
	goodsList.value = [];
	getSearchGoodsFun();
	uni.stopPullDownRefresh();
});

// 商品列表分页查询
const goodsList = ref([]);
const pageSize = ref('10');
const pageNum = ref('1');
const total = ref('0');
const LoadingStatus = ref('loadmore');
const getSearchGoodsFun = async () => {
	LoadingStatus.value = 'loading';

	let res = await getSearchGoods({
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		platform: navChild.value[activePlatformTab.value].platform,
		materialIds: navChild.value[activePlatformTab.value].materialIds
	});

	if (res.code == 0) {
		if (goodsList.value.length == res.data.total || res.data.total == 0) {
			LoadingStatus.value = 'nomore';
			return;
		}

		total.value = res.data.total;
		if (res.data.rows.length > 0) {
			goodsList.value = [...goodsList.value, ...res.data.rows];

			pageNum.value++;

			if (goodsList.value.length == res.data.total) {
				LoadingStatus.value = 'nomore';
			}
		}
		console.log('goodsList.value', goodsList.value);
	}
};

onReachBottom(() => {
	getSearchGoodsFun();
});

// 切换商品平台
const choosePlatform = (item, index) => {
	console.log(item, index);
	activePlatformTab.value = index;

	pageNum.value = 1;
	total.value = 0;
	goodsList.value = [];
	getSearchGoodsFun();

	nextTick(() => {
		console.log('InfoBoxHeight.value', InfoBoxHeight.value);
		uni.pageScrollTo({
			scrollTop: InfoBoxHeight.value + 24,
			duration: 0,
			success: (e) => {
				console.log('移动成功：', e);
			}
		});
	});
};

// 获取首页配置
const getHomeConfigFun = async () => {
	let res = await getHomeConfig({
		plateType: 0
	});

	if (res.code == 0) {
		// 页面背景图
		if (res.data.config.backgroundImg) {
			let bgi = res.data.config.backgroundImg.filter((bgi) => bgi.subPlateType == 'backgroundImg')[0].imgUrl;
			pageBackgroundImg.value = `url(${bgi})`;
		}

		// 顶部轮播图banner0
		if (res.data.config.banner0) {
			banner0.value = res.data.config.banner0;
			console.log(banner0.value);
		}
		
		// 中间轮播图banner1
		if (res.data.config.banner1) {
			banner1.value = res.data.config.banner1;
			console.log(banner1.value);
		}

		// 超级爆品、新手教程模块
		if (res.data.config.activity3) {
			activity3.value = res.data.config.activity3;

			// 模块对应背景图
			if (res.data.config.backgroundImg) {
				let bgi = res.data.config.backgroundImg.filter((bgi) => bgi.subPlateType == 'backgroundImg1')[0].imgUrl;
				ac3BackgroundImg.value = `url(${bgi})`;
			}
		}

		// 平台菜单模块按钮背景图swiper
		if (res.data.config.nav) {
			platformMenuSwiperList.value = res.data.config.nav;
		}
		
		// activity0活动模块
		if (res.data.config.activity0) {
			activity0.value = res.data.config.activity0;
		}

		// 页面中部左右结构三块区域背景图(左边轮播)
		if (res.data.config.banner2) {
			banner2.value = res.data.config.banner2;
		}

		// 页面中部左右结构三块区域背景图(右边上下卡片)
		if (res.data.config.activity1) {
			activity1.value = res.data.config.activity1;
		}

		// 页面商品平台分类菜单列表
		if (res.data.navChild) {
			navChild.value = res.data.navChild;
			getSearchGoodsFun();
		}

		// 活动弹窗
		if (res.data.config.pop) {
			let popList = [];
			res.data.config.pop.forEach((pop) => {
				pop.isShow = true;
				popList.push(pop);
			});
			pop.value = popList;
			if (pop.value.length) {
				activityDialogShow.value = true;
			}
		}
	}

	getInfoBoxHeight();
};

// 获取商品列表上方信息区域高度
const InfoBoxHeight = ref(0);
const getInfoBoxHeight = () => {
	nextTick(() => {
		uni.$u.getRect('.info-box').then((res) => {
			console.log('商品信息区域高度：', res);
			InfoBoxHeight.value = res.height;
		});
	});
};

// 获取转链跳转H5地址
const getTransformLinkH5UrlFun = async () => {
	let res = await getTransformLinkH5Url();
};

// 获取商品列表区域最小高度
const goodsListMinHeight = ref('auto');

// 跳转到搜索页
const toSearchPage = () => {
	uni.navigateTo({
		url: '/subPages/searchPage/index'
	});
};

// activity0活动点击
const activity0Click = (item) => {
	console.log(item);
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(item.linkUrl)}`
	});
};

// 点击顶部轮播图跳转
const banner0Click = (e) => {
	console.log(banner0.value[e]);
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(banner0.value[e].linkUrl)}`
	});
};

// 点击中部轮播图跳转
const banner1Click = (e) => {
	console.log(banner1.value[e]);
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(banner1.value[e].linkUrl)}`
	});
};

// 活动、新手教程区域点击
const activity3TabClick = (item) => {
	console.log(item);
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(item.linkUrl)}`
	});
};

// 首页多个平台菜单点击
const menuItemClick = (menu) => {
	console.log(menu);
	
	isLogin();
	
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(menu.linkUrl)}`
	});
};

// banner2轮播点击
const banner2Click = (e) => {
	console.log(banner2.value[e]);
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(banner2.value[e].linkUrl)}`
	});
};

// activity1Click活动点击
const activity1Click = (item) => {
	console.log(item);
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(item.linkUrl)}`
	});
};

// 进群
const fakeJinQun = () => {
	isLogin();
};

// 转链
const toTransLink = async () => {
	isLogin();
	
	uni.showLoading()
	let res = await getTransformLinkH5Url();
	uni.hideLoading();
	if (res.code == 0) {
		uni.navigateTo({
			url: `/subPages/subWebView/index?url=${encodeURIComponent(res.data.chainTurn)}`
		});
	}
};

// 跳转消息页面
const toMessagePage = () => {
	isLogin();
	
	uni.navigateTo({
		url: '/subPages/message/message'
	})
};

// 获取用户未读消息
const unReadMsgCount = ref(0);
const getUnreadCountFun = async () => {
	if (userStore.access_token) {
		let res = await getUnreadCount();
		console.log('用户未读消息数：', res);
		
		if (res.code == 0) {
			unReadMsgCount.value = res.data;
		}
	}
};

// 判断登录
const isLogin = () => {
	if (!userStore.access_token) {
		uni.navigateTo({
			url: '/subPages/login/index'
		})
		
		throw new Error('去登录！！！')
	};
}

onShow(() => {
	getUnreadCountFun();
});

onMounted(() => {
	getHomeConfigFun();
});
</script>

<style lang="scss" scoped>
.home-container {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;

	.activityArea {
		padding: 0 12px;
		// background-color: #c6f938;

		.searchBar-box {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			padding: 12px;
			// background-color: #9dc181;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			background-attachment: fixed;

			.input-box {
				display: flex;
				align-items: center;
				width: 231px;
				height: 40px;
				padding: 13px 0 13px 14px;
				border-radius: 32px;
				background-color: #fff;
				margin-right: 12px;

				.searchIcon {
					min-width: 12.38px;
					min-height: 13.87px;
					max-width: 12.38px;
					max-height: 13.87px;
					margin-right: 9px;
				}

				.searchInput {
					font-size: 14px;
				}

				.searchBtn {
					color: #ff0309;
					width: 64px;
					font-size: 14px;
					font-weight: 500;
					line-height: 16px;
					text-align: center;
					margin-left: 10px;
					border-left: 1px solid rgba(255, 61, 59, 0.2);
				}
			}

			.func-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.func-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 32px;
					height: 40px;
					margin: 0;
					padding: 0;
					background-color: transparent;
					border: none !important;
					outline: none !important;
					
					&::after{
					  border: none;
					}

					.func-icon {
						width: 22px;
						height: 22px;
						margin-bottom: 3px;
					}

					.func-text {
						color: #fff;
						font-size: 10px;
						font-weight: 400;
						line-height: 12px;
					}
				}
				
				.message {
					position: relative;
					
					.unReadIcon {
						position: absolute;
						top: 2px;
						right: 5px;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background-color: #FF0309;
						border: 1px solid #fff;
					}
				}
			}
		}

		.home-swiper-box {
			height: 140px;
			border-radius: 12px;
			overflow: hidden;
			margin-bottom: 12px;
			// background-color: #fff0a7;

			:deep(.u-indicator-item-round) {
				width: 2px;
				height: 2px;
			}

			:deep(.u-indicator-item-round-active) {
				width: 10px;
				height: 2px;
			}
		}

		.platform-menu-box {
			position: relative;
			height: 170px;
			padding: 12px 12px 22px;
			border-radius: 12px;
			margin-bottom: 12px;
			background-color: #fff;

			.platform-menu-item {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-template-rows: repeat(2, 1fr);
				grid-row-gap: 12px;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.menu-icon {
						width: 34px;
						height: 34px;
						margin-bottom: 9px;
						border-radius: 12px;
						background-color: pink;
					}

					.menu-text {
						font-size: 12px;
						font-weight: 400;
						line-height: 16px;
						white-space: nowrap;
					}
				}
			}

			.dots-list {
				position: absolute;
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				height: 2px;
				border-radius: 1px;
				background-color: #f0f0f0;

				.dots-item {
					width: 10px;
					height: 2px;
					border-radius: 1px;
					background-color: #f0f0f0;
				}

				.dots-active {
					background-color: #ff0309;
				}
			}
		}

		.category-menu-box {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-column-gap: 10px;
			margin-bottom: 12px;

			.category-menu-item {
				width: 62px;
				height: 62px;
				border-radius: 12px;
				background-color: #fff;
			}
		}

		.activity-swiper-box {
			display: flex;
			height: 140px;
			border-radius: 12px;
			margin-bottom: 12px;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;

			.activity-swiper-box-img {
				height: 100%;
			}

			// :deep(.u-indicator-item-round) {
			// 	width: 2px;
			// 	height: 2px;
			// }

			// :deep(.u-indicator-item-round-active) {
			// 	width: 10px;
			// 	height: 2px;
			// }
		}

		.subsidy-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin-bottom: 12px;

			.subsidy-left {
				flex: 1;
				height: 210px;
				border-radius: 12px;
				// background-color: #f32762;
				overflow: hidden;

				:deep(.u-indicator-item-round) {
					width: 2px;
					height: 2px;
				}

				:deep(.u-indicator-item-round-active) {
					width: 10px;
					height: 2px;
				}
			}

			.subsidy-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 10px;
				border-radius: 12px;

				.subsidy-right-img {
					width: 100%;
					height: 100px;
					border-radius: 12px;
					background-color: #fa8c57;
				}
			}
		}

		.goods-suggest-box {
			border-radius: 12px;
			overflow: hidden;
			margin-bottom: 12px;
			background-color: #fff;

			.goods-suggest-box-title {
				font-size: 14px;
				font-weight: 500;
				line-height: 18px;
				padding: 12px 12px 0;
				background: linear-gradient(180deg, rgba(255, 61, 59, 0.2) 0%, rgba(255, 61, 59, 0) 100%);
			}

			.goods-suggest-box-scroll-X {
				white-space: nowrap;

				.goods-suggest-list {
					display: flex;
					width: 100%;
					padding: 12px;

					.goods-suggest-list-box {
						padding-right: 10px;
					}

					.goods-suggest-list-item {
						display: flex;
						flex-direction: column;
						max-width: 90px;

						.goods-suggest-list-item-pic {
							width: 90px;
							height: 90px;
							border-radius: 8px;
							margin-bottom: 10px;
							background-color: #d1b495;
						}

						.goods-suggest-list-item-title {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							margin-bottom: 6px;
						}

						.goods-suggest-list-item-money {
							color: #ff0309;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
						}
					}
				}
			}
		}

		.Recharge-Discount-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 12px;

			.Recharge-Discount-item {
				width: 80px;
				height: 100px;
				border-radius: 12px;
				background-color: #9dc181;
			}
		}

		.goods-list-box {
			transform: translateX(-12px);
			width: 100vw;
			background-color: #f9f9f9;

			.platform-tabs-list {
				// transform: translateX(-12px);
				// width: 100vw;
				height: 36px;
				margin-bottom: 12px;
				background-color: #f9f9f9;
				overflow-x: scroll;
				white-space: nowrap;

				// 隐藏滚动条
				&::-webkit-scrollbar {
					display: none;
				}

				.platform-tabs-list-item {
					position: relative;
					flex: 1;
					display: inline-block;
					text-align: center;
					width: calc(100vw / 4);
					font-size: 14px;
					font-weight: 400;
					line-height: 36px;

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
						height: 1em;
						border-right: 1px solid rgba(153, 153, 153, 0.2);
					}

					&:last-child {
						&::after {
							display: none;
						}
					}
				}

				.activePlatformTab {
					color: #ff0309;
					font-weight: 600;
				}
			}

			.goods-list-view {
				position: relative;
				padding: 0 12px 12px;

				.goods-list-view-empty {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;

					.goods-list-view-empty-img {
						width: 120px;
						height: 120px;
						font-weight: 500;
						font-size: 14px;
						margin-bottom: 20px;
					}
				}
			}
		}
	}
}
</style>
